<template>
	<ul class="flex flex-y cmsFilter">
		<li 
			class="flex flex-y flex-x" 
			:class="{'active':item.order}"
			v-for="(item,index) in list" 
			:key="index"
			@click="changeLabel(item,index)">
			<span>{{item.label}}</span>
			<span style="width:13px">
				<img :src="imgUp" class="icon" v-if="item.order == 'asc'">
				<img :src="imgDown" class="icon" v-if="item.order == 'desc'">
			</span>
		</li>
	</ul>
</template>

<script>
export default {
	props:{
		list_filter:Array, 
		value:Object 
	},
	data () {
		return {
			/*
				desc:由大到小，asc：由小到大
				arrow-up.png：箭头往上，低到高，用asc
			*/
			active:1, // 高亮，根据value字段
			imgUp:require('./arrow-up.png'),
			imgDown:require('./arrow-down.png')
		}
	},
	computed:{
		list(){
			// 拿到下标
			let index = 0;
			let arr = this.list_filter;
			arr.map((o,n)=>{
				if(o.value == this.value.value){
					index = n;
				}
				else{
					o.order = '';
				}
			})
			arr[index] = this.value;
			return arr;
		}
	},
	methods:{
		// 点击事件
		changeLabel(row,n){
			this.active = row.value; // 高亮
			row.order == 'desc'?row.order = 'asc':row.order = 'desc';
			this.$emit('input',row);
			
			// 其他不展示箭头
			this.list.map((o,s)=>{
				if(n != s){
					o.order = '';
				}
			});
		},
	},
	mounted(){

	}
}
</script>

<style lang="scss" scoped>
	.cmsFilter{
		padding: 12px;
		background-color: #fff;
		font-size: 14px;
		li{
			flex:1;
		}
		.icon{
			width: 8px;
			margin-left: 4px;
		}
		.active{
			color: #e14747;
		}
	}
</style>
